<template>
	<scroll-view class="container":scroll-y="true"  @scrolltolower="scrollBottom">
		<view class="pd2">
			<navigator url="/pages/search/search">
				<u-search :clearabled="true" height="55"></u-search>
			</navigator>
		</view>
		 <u-swiper
		            :list="SwiperList"
					height="320"
					keyName="imgUrl"
		    ></u-swiper>
		<view class="home-category">
			<navigator class="c-item" hover-class="none" url="/pages/category_list/category_list?type=hot">
				<image src="@/static/home-h.png" mode="widthFix" class="c_img"></image>
				<text>热门商品</text>
			</navigator>
			<navigator class="c-item"  hover-class="none" url="/pages/category_list/category_list?type=recommend">
				<image src="@/static/home-r.png" mode="widthFix" class="c_img"></image>
				<text>推荐商品</text>
			</navigator>
			<navigator class="c-item"  hover-class="none" url="/pages/category_list/category_list?type=new">
				<image src="@/static/home-n.png" mode="widthFix" class="c_img"></image>
				<text>上新商品</text>
			</navigator>
			<navigator class="c-item"  hover-class="none" url="/pages/category/category"  open-type="switchTab">
				<image src="@/static/home-c.png" mode="widthFix" class="c_img"></image>
				<text>商品分类</text>
			</navigator>
		</view>
		<view class="home-product"  >
				<Product :product="item"  v-for="(item,index) in productList" :key="index"></Product>
		</view>
		<view class="shopcar" >
			<navigator url="/pages/shop/shop" open-type="switchTab" hover-class="none">
				<text>{{shopnum}}</text>
				<u-icon  size="50" name="shopping-cart"></u-icon>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
	import Product from "@/components/Product/Product.vue"
	const app = getApp()
export default {
	components:{
		Product
	},
	data() { 
		return {
			title:'标题',
			 SwiperList: [
			],
			show: false,
			product:{
				name:'某商品的标题',
				images:['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
				textarea:'某商品的描述，这是一段描述文字,某商品的描述，这是一段描述文字,某商品的描述，这是一段描述文字,某商品的描述，这是一段描述文字'
			},
			productList:[],
			pageNum:0,
			pageSize:10,
			allListItem:false,
			shopnum:0,
		};
	},
	mounted() {
	
		this.getGoodList()
		this.getswiper()
		console.log(app);
	},
	onShow() {
		this.shopnum = uni.getStorageSync("shopnum")||0
	},
	methods:{
		getswiper(){
			this.$http.getswiper().then(res=>{
				let bannerList = res.data.bannerList
				let arr = []
				bannerList.forEach(i=>{
					i.imgUrl = this.resetImgUrl(i.imgUrl)
					arr.push(i)
				})
				this.SwiperList = arr
			})
		},
		getGoodList(){
			this.$http.recommonGoodsList({pageNum:this.pageNum}).then(res=>{
				this.productList = [...this.productList,...res.data]
				this.pageCount = res.count
			})
		},
		scrollBottom(){
		    // 触底的时候请求数据，即为上拉加载更多
		    var allTotal = this.pageNum * this.pageSize
		    if(allTotal < this.pageCount){
		   this.allListItem = false;    
		        this.pageNum ++;    
		         this.getGoodList(this.usertoken); 
		    }else{
		        this.allListItem = true;
		    }
		},
	},

};
</script>
<style scoped>
	.container{
		background-color: rgb(248, 248, 248);
		width: 100%;
		height: calc(100vh - 50px);
		overflow-y: scroll;
	}
	.pd2{
		padding: 2%;
		background-color: #fff;
	}
	.home-category{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 2%;
		background-color: #fff;
		padding: 25rpx 10rpx;
		border-radius: 5px;
	}
	.c-item{
		width: 22%;
		text-align: center;
	}
	.c-item uni-image{
		width: 60%;
		display: block;
		margin:  10rpx auto;
	}
	.c-item text{
		font-size: 24rpx;
		color: #666;
	}
	.home-product {
		height: 100vh;
		padding:0  2%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	
	}
	.shopcar{
		position: fixed;
		right: 50rpx;
		padding: 20rpx;
		bottom: 240rpx;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
	}
	.shopcar navigator{
		position: relative;
	}
	.shopcar text{
		position: absolute;
		right: -25%;
		top: -60%;
		background-color: red;
		border-radius: 50%;
		padding: 0 8rpx;
		font-weight: blod;
		font-size:24rpx;
		color:#fff;
	}
</style>
